    /* Imports */
	var markerNTime = [];
	var nearby;
	var locNPic = [];
	var path;

    /* Implementation */
    function $$(x) {
        return document.getElementById(x);
    }


    function handleImage() {
	console.log(fileList);
	console.log(selectedIndex);
		markerNTime = [];
		locNPic = [];
		path = new google.maps.Polyline();
		for(var i = 0; i < selectedIndex.length; i++)
		{
			var file = fileList[selectedIndex[i]].url;
			var thumbNail = fileList[selectedIndex[i]].thumbnailUrl;
			var latitude;
			var time;
			var longitude;
			url = "http://localhost/travelalbum/server/php/getEXIF.php";
			$.ajax({
				url: url,
				type: "POST",
				data:{fileName:file, thumbNail: thumbNail},
				success:function(response){
					sum = response;
					var arr = sum.split('=');
					latitude = arr[0];
					longitude = arr[1];
					time = arr[2];
					loadFiles(arr[3],arr[4], time, longitude, latitude);
				}
			});

		}
	
    }

    function loadFiles(file,thumbNail, time, longitude, latitude) {
	console.log("loading file");
	console.log(file);
		if (latitude && longitude) {
			if(!checkAlbum(file,thumbNail, longitude, latitude)){
				result= {
					lat:latitude,
					lng:longitude,
					};
				drawMarker(result, file, thumbNail, time);
			}
		}
    }
	
	function checkAlbum(filename, thumbNail, longitude, latitude){
		for(var i = 0; i < locNPic.length; i++){
			if(Math.abs(locNPic[i].loc.latitude - latitude) < 1 && Math.abs(locNPic[i].loc.longitude - longitude) < 1){
				var pic = {filename : filename, thumbNail : thumbNail};
				locNPic[i].picList.push(pic);
				return true;
			}
		}
		var loc = {latitude: latitude, longitude: longitude};
		var pic = {filename : filename, thumbNail: thumbNail};
		var picList = [];
		picList.push(pic);
		var entry = {loc: loc, picList: picList};
		locNPic.push(entry);
		return false;
	}


	function drawMarker(result, filename,thumbNail, time){
	    var location = new google.maps.LatLng(result.lat , result.lng);
		var marker = new google.maps.Marker({
			position: location,
			map: map,
		});
		marker.info = new google.maps.InfoWindow({
			content: '<img src=\''+thumbNail+'\'>'
		});
		google.maps.event.addListener(marker,'mouseover',function(){
			marker.info.open(map,this);
		});
		google.maps.event.addListener(marker,'mouseout',function(){
			marker.info.close();
		});
		
		 google.maps.event.addListener(marker, 'click', function() {
			map.setZoom(8);
			map.setCenter(marker.getPosition());
			showHiddenPic(marker.position);
		});

		var mt = { marker: marker, time: convertTime(time)};
		markerNTime.push(mt);

		var diff = mt.time - markerNTime[0].time;
		markerNTime.sort(function(a,b){return Date.parse(a.time) - Date.parse(b.time)});
		drawRoute();
	}
	
	function showHiddenPic (markerLoc){
		for(var i = 0; i < locNPic.length; i++){
			if(Math.abs(locNPic[i].loc.latitude - markerLoc.lat()) < 0.01 && Math.abs(locNPic[i].loc.longitude == markerLoc.lng())<0.01){
				$$("slideshow").innerHTML = "";
				var picList = locNPic[i].picList;
				$$("slideshow").innerHTML += "<div class=\"highslide-gallery\" id=\"highslide-gallery\"  margin: auto\"></div>";
				for(var j = 0; j < picList.length; j++){
					var filename = picList[j].filename;
					var thumbNail = picList[j].thumbNail;
					$$("highslide-gallery").innerHTML += "<a class='highslide' href='"+filename+"' onclick=\"return hs.expand(this)\"><img src='"+thumbNail+"' alt=''/></a>"
				}
			}
		}
		if('token' in IG){
			getNearByPhotos(markerLoc);
		}
	}
	function getNearByPhotos(location) {
		var params = {
			lat: location.lat(),
			lng: location.lng(),
			DISTANCE: '1000',
		};
		var fn = function(result) {
			nearby = result.data;
			if(result.data.length > 0){
				$("#show-neayby-button").show();
			}
		}
		IG.searchPhoto(fn, params);
	}
	function viewNearBy(){
		$$("slideshow").innerHTML = "";
		$$("slideshow").innerHTML += "<div class=\"highslide-gallery\" id=\"highslide-gallery\" style=\" margin: auto\"></div>";
		for(var i=0; i < nearby.length; i++){
			var thumbNail = nearby[i].images.thumbnail.url;
			var filename = nearby[i].images.standard_resolution.url;
			$$("highslide-gallery").innerHTML += "<a class='highslide' href='"+filename+"' onclick=\"return hs.expand(this)\"><img src='"+thumbNail+"' alt=''/></a>"
		}
	}
	
	function drawRoute(){
		var lineSymbol = {
		path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
		};
		path.setMap(null);
		var polyline = [];
		if(markerNTime.length > 1){
			for(var i = 0; i < markerNTime.length; i++){
				polyline.push(markerNTime[i].marker.position);
			}
			path = new google.maps.Polyline({
			    path: polyline,
					geodesic: true,
					strokeColor: '#FF0000',
					strokeOpacity: 0.4,
					strokeWeight: 3,
					icons: [{icon: lineSymbol, offset: '100%'}],
			});
			path.setMap(map);
		}
	}
	
	function convertTime(time){
		var regexp = /([0-9]{4}):([0-9]{2}):([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})/;
		var result = regexp.exec(time);

		var date = new Date();
		date.setYear(result[1]);
		date.setMonth(result[2]-1);
		date.setDate(result[3]);
		date.setHours(result[4]);
		date.setMinutes(result[5]);
		date.setSeconds(result[6]);
		return date;
	}
	
	
	
	// slide show
hs.graphicsDir = 'js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	overlayOptions: {
		className: 'text-controls',
		position: 'bottom center',
		relativeTo: 'viewport',
		offsetY: -60
	},
	thumbstrip: {
		position: 'bottom center',
		mode: 'horizontal',
		relativeTo: 'viewport'
	}
});
